<template>
  <el-container class="container">
    <el-aside width="12%">
      <el-menu
          router
          class="menu"
          :default-active="$route.path"
          default-opened="Diagnosis"
          background-color="#304156"
          text-color="rgb(191, 203, 217)"
          active-text-color="#1890ff">
        <el-menu-item class="icon-menu">
          <template slot="title">
            <img src="../assets/icon/logo.png" class="menu-logo"/>
            <span class="menu-title">眼疾智能诊断系统</span>
          </template>
        </el-menu-item>
        <el-submenu index="Diagnosis">
          <template slot="title">
            <i class="el-icon-search"></i>
            <span>疾病诊断</span>
          </template>
          <el-menu-item index='/home/singleDiagnosis'>
            <template slot="title">
              <i class="el-icon-view"></i>
              <span>单次诊断</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/home/batchDiagnosis">
            <template slot="title">
              <i class="el-icon-notebook-2"></i>
              <span>批量诊断</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/home/intelligentMedical">
            <template slot="title">
              <i class="el-icon-magic-stick"></i>
              <span>智能求医</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/home/onlineConsultation">
            <template slot="title">
              <i class="el-icon-monitor"></i>
              <span>线上问诊</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/home/liveQA">
            <template slot="title">
              <i class="el-icon-chat-dot-round"></i>
              <span>直播答疑</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/home/diseaseScience">
            <template slot="title">
              <i class="el-icon-reading"></i>
              <span>疾病科普</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/home/scienceVideo">
            <template slot="title">
              <i class="el-icon-video-camera"></i>
              <span>视频科普</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/home/drugInquiry">
            <template slot="title">
              <i class="el-icon-receiving"></i>
              <span>药品查询</span>
            </template>
          </el-menu-item>
        </el-submenu>
        <el-submenu index="Analysis">
          <template slot="title">
            <i class="el-icon-document-copy"></i>
            <span>数据总览</span>
          </template>
          <el-menu-item index="/home/dataAnalysis">
            <template slot="title">
              <i class="el-icon-data-line"></i>
              <span>数据分析</span>
            </template>
          </el-menu-item>
          <el-menu-item index="#home" @click="jumpToDataScreen">
            <template slot="title">
              <i class="el-icon-full-screen"></i>
              <span>大屏模式</span>
            </template>
          </el-menu-item>
        </el-submenu>
        <el-submenu index="Manage" v-if="nowUser.role === 2">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>系统管理</span>
          </template>
          <el-menu-item index="/home/identityAuthentication">
            <template slot="title">
              <i class="el-icon-edit-outline"></i>
              <span>身份认证</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/home/userManagement">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>用户管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/home/drugManagement">
            <template slot="title">
              <i class="el-icon-first-aid-kit"></i>
              <span>药品管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/home/modelManagement">
            <template slot="title">
              <i class="el-icon-coordinate"></i>
              <span>模型管理</span>
            </template>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header class="header">
        <div class="navbar">
          <i :class="closeMenu ? 'el-icon-s-unfold header-icon' : 'el-icon-s-fold header-icon'"></i>
          <el-breadcrumb separator="/" class="path">
            <el-breadcrumb-item v-for="(item,index) in breadArray" :key="index" :to="{ path: item.path }">
              {{ item.name }}
            </el-breadcrumb-item>
          </el-breadcrumb>
          <div class="user-info">
            <el-badge :value="messageCount" class="badge" :max="99" :hidden="messageCount<=0">
              <i class="el-icon-bell" @click="showOuterMessageBoard = true"></i>
            </el-badge>
            <el-tag :type="identityColor[identity]" size="small" style="margin-right: 15px">{{identity}}</el-tag>
            <el-dropdown>
                <span class="el-dropdown-link">
                  <el-avatar shape="square" :size="40"
                             :src="nowUser.avatar"></el-avatar>
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="showDialog = true">修改信息/认证</el-dropdown-item>
                <el-dropdown-item @click.native="logout">注销</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-main class="main-area">
        <el-tabs type="border-card" class="main-tabs">
          <el-tab-pane :label="$route.path !== '/home' ? tabName : '首页'">
            <router-view v-if="$route.path !== '/home'"></router-view>
            <div v-else class="home-page">
              <div class="all-work">
                <div class="home-tips">
                  <img src="../assets/image/work.png" alt="" class="home-tips-icon"/>
                  <div class="home-tips-text">整体流程图</div>
                </div>
              <img src="../assets/image/all.png" alt="" style="width: 100%;height: 100%"/>
              </div>
              <div class="advantages">
                <div class="home-tips first">
                  <img src="../assets/image/work.png" alt="" class="home-tips-icon"/>
                  <div class="home-tips-text">相关介绍</div>
                </div>
                <div class="introductions">

                  <div class="introduction first">
                    <img src="../assets/image/first_background.png" class="introduce-background" alt=""/>
                    <div class="introduction-content">
                      <img src="../assets/image/first.png" class="introduction-content-background" style="z-index: 99" alt=""/>
                      <div class="blank"></div>
                      <div class="introduction-title" style="z-index: 99">精准识别</div>
                      <div class="blank"></div>
                      <div class="introduction-text" style="z-index: 99">精确度：96.06%<br/>F1：90.21%<br/>查准率：90.05%<br/>召回率：90.70%<br/>Kappa：0.8554</div>
                    </div>
                  </div>

                  <div class="introduction second">
                    <img src="../assets/image/second_background.png" class="introduce-background" alt=""/>
                    <div class="introduction-content">
                      <img src="../assets/image/second.png" class="introduction-content-background" style="z-index: 99" alt=""/>
                      <div class="blank"></div>
                      <div class="introduction-title" style="z-index: 99">操作简单</div>
                      <div class="blank"></div>
                      <div class="introduction-text" style="z-index: 99">仅需上传左右眼底图片，点击开始按钮，即可开始诊断。</div>
                    </div>
                  </div>

                  <div class="introduction three">
                    <img src="../assets/image/three_background.png" class="introduce-background" alt=""/>
                    <div class="introduction-content">
                      <img src="../assets/image/three.png" class="introduction-content-background" style="z-index: 99" alt=""/>
                      <div class="blank"></div>
                      <div class="introduction-title" style="z-index: 99">多模态</div>
                      <div class="blank"></div>
                      <div class="introduction-text" style="z-index: 99">传统的眼底识别技术大多采用单模态，然而这种方式忽略了不同模态之间的交互，同时更容易出错。</div>
                    </div>
                  </div>

                  <div class="introduction four">
                    <img src="../assets/image/four_background.png" class="introduce-background" alt=""/>
                    <div class="introduction-content">
                      <img src="../assets/image/four.png" class="introduction-content-background" style="z-index: 99" alt=""/>
                      <div class="blank"></div>
                      <div class="introduction-title" style="z-index: 99">功能齐全</div>
                      <div class="blank"></div>
                      <div class="introduction-text" style="z-index: 99">除基本的诊断功能外，通过接入大模型额外提供智能求医功能，同时能在线进行数据分析。</div>
                    </div>
                  </div>

                </div>
              </div>
              <div class="bottom-blank"></div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>

    <el-dialog
        title="更改信息"
        :visible.sync="showDialog"
        width="50%">
      <el-form ref="form" :model="infoForm" label-width="auto">
        <el-form-item label="用户名">
          <el-input v-model="infoForm.username" placeholder="请输入新的用户名" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="infoForm.newPassword" placeholder="请输入新的密码" type="password"></el-input>
        </el-form-item>
        <el-form-item label="工作医院" v-if="nowUser.role === 0">
          <el-input v-model="infoForm.hospital" placeholder="请输入工作所在医院"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
              accept=".jpg,.png,.jpeg"
              drag
              action="https://yiyuy.mynatapp.cc/info/imageToOSS"
              :on-exceed="handleUploadExceed"
              :on-progress="handleUploadProgress"
              :on-error="handleUploadError"
              :on-success="handleAvatarUploadSuccess"
              :limit="1">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
        <el-form-item label="工作证明" v-if="nowUser.role === 0">
          <el-upload
              accept=".jpg,.png,.jpeg"
              drag
              action="https://yiyuy.mynatapp.cc/info/imageToOSS"
              :on-exceed="handleUploadExceed"
              :on-progress="handleUploadProgress"
              :on-error="handleUploadError"
              :on-success="handleProofUploadSuccess"
              :limit="1">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="updateUserInfo">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="留言板" :visible.sync="showOuterMessageBoard">
      <el-dialog
          width="30%"
          title="回复留言"
          :visible.sync="showInnerMessageBoard"
          append-to-body>
        <el-form v-model="privateMessageForm" label-width="auto">
          <el-form-item label="留言内容">
            <el-input
                resize="none"
                type="textarea"
                :rows="2"
                placeholder="请输入留言内容"
                v-model="privateMessageForm.content">
            </el-input>
          </el-form-item>
          <el-form-item label="附件">
            <el-upload
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showInnerMessageBoard = false">取 消</el-button>
          <el-button type="primary" @click="submitPrivateMessage">回复</el-button>
        </div>
      </el-dialog>
      <div v-if="messageCount > 0">
        <el-table
            :data="messageList"
            stripe
            border
            style="width: 100%">
          <el-table-column
              prop="fromUsername"
              label="留言人">
          </el-table-column>
          <el-table-column
              prop="content"
              label="留言内容">
          </el-table-column>
          <el-table-column
              prop="fileUrl"
              label="附件">
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作">
            <template slot-scope="scope">
              <el-button @click="openInnerBoard(scope.row)" type="text" size="small">回复</el-button>
              <el-button @click="markAsHasRead(scope.row)" type="text" size="small">标记为已读</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-else>
        <el-empty></el-empty>
      </div>
    </el-dialog>

  </el-container>
</template>

<script>
import {updateInfo, getUserInfo} from "@/api/login";
import {getUserMessage, markMessageRead, replyMessage} from "@/api/question";

export default {
  name: "Home",
  data() {
    return {
      // 当前身份
      identity: '',
      identityColor: {
        '患者': 'primary',
        '医生': 'success',
        '管理员': 'danger'
      },
      // 当前用户信息
      nowUser: {},
      // 是否显示内外留言板
      showOuterMessageBoard: false,
      showInnerMessageBoard: false,
      // 获取的所有留言
      messageList: [],
      messageCount: 0,
      closeMenu: false,
      tabName: '',
      breadArray: [],
      // 是否显示修改个人信息界面
      showDialog: false,
      infoForm: {
        username: '',
        newPassword: '',
        avatar: '',
        hospital: '',
        proof: ''
      },
      // 私信留言需要填写的表格
      privateMessageForm: {
        content: '',
        fileUrl: '',
        toUsername: '',
        messageId: ''
      },
      pathFather: {
        '单次诊断': '疾病诊断',
        '批量诊断': '疾病诊断',
        '智能求医': '疾病诊断',
        '线上问诊': '疾病诊断',
        '疾病科普': '疾病诊断',
        '视频科普': '疾病诊断',
        '药品查询': '疾病诊断',
        '视频详情': '疾病诊断',
        '直播答疑': '疾病诊断',
        '直播详情': '疾病诊断',
        '问题详情': '线上问诊',
        '数据分析': '数据总览',
        '身份认证': '系统管理',
        '用户管理': '系统管理',
        '模型管理': '系统管理',
        '药品管理': '系统管理',
      },
      pathToName: {
        '/home/singleDiagnosis': '单次诊断',
        '/home/batchDiagnosis': '批量诊断',
        '/home/intelligentMedical': '智能求医',
        '/home/dataAnalysis': '数据分析',
        '/home/diseaseScience': '疾病科普',
        '/home/onlineConsultation': '线上问诊',
        '/home/questionDetail': '问题详情',
        '/home/identityAuthentication': '身份认证',
        '/home/userManagement': '用户管理',
        '/home/modelManagement': '模型管理',
        '/home/scienceVideo': '视频科普',
        '/home/drugInquiry': '药品查询',
        '/home/videoDetail': '视频详情',
        '/home/drugManagement': '药品管理',
        '/home/liveQA': '直播答疑',
        '/home/liveQADetail': '直播详情'
      }
    }
  },
  watch: {
    $route: {
      handler: function (val) {
        this.tabName = this.pathToName[val.path]
        this.breadArray = []
        this.breadArray.push({
          name: '首页',
          path: '/home',
        })
        if (val.path !== '/home') {
          // 添加父级
          this.breadArray.push({
            name: this.pathFather[this.pathToName[val.path]],
            path: '/home',
          })
          // 添加子级
          this.breadArray.push({
            name: this.pathToName[val.path],
            path: val.path,
          })
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.getNowUserInfo()
    this.getNowUserMessage()
  },
  methods: {
    // 跳转至 数据大屏
    jumpToDataScreen() {
      window.open('http://47.120.31.85:9095/index.html#/aj/zFpuhZOC', '_blank')
    },
    handleUploadExceed() {
      this.$message.warning('只能上传一个文件')
    },
    handleUploadProgress() {
      this.$message.warning('文件上传中...')
    },
    handleUploadError() {
      this.$message.error('文件上传失败，请联系管理员')
    },
    handleAvatarUploadSuccess(response, file, fileList) {
      this.$message.success('头像上传成功')
      this.infoForm.avatar = response.data;
    },
    handleProofUploadSuccess(response, file, fileList) {
      this.$message.success('工作证明上传成功')
      this.infoForm.proof = response.data;
    },
    // 获取当前用户的留言
    getNowUserMessage() {
      getUserMessage().then(res =>{
        if ( res.code === 200 ) {
          this.messageList = res.data
          this.messageCount = this.messageList.length
        }else {
          this.$message.error('留言获取失败。请联系管理员')
        }
      })
    },
    // 获取用户个人信息
    getNowUserInfo() {
      getUserInfo().then(res => {
        if (res.code === 200) {
          this.infoForm.username = res.data.username
          this.nowUser = res.data;
          if ( this.nowUser.role === 0 ) {
            this.identity = '患者'
          }
          if ( this.nowUser.role === 1 ) {
            this.identity = '医生'
          }
          if ( this.nowUser.role === 2 ) {
            this.identity = '管理员'
          }
        }
      })
    },
    // 修改密码
    updateUserInfo() {
      updateInfo(this.infoForm).then(res => {
        if (res.code === 200) {
          this.$message.success('信息修改成功')
        }else {
          this.$message.error(res.message)
        }
      })
      this.showDialog = false;
    },
    // 用户注销
    logout() {
      // 删除token 返回登录页面
      sessionStorage.removeItem("token")
      this.$router.push('/login')
    },
    // 回复留言
    openInnerBoard(row) {
      this.showInnerMessageBoard = true;
      this.privateMessageForm.toUsername = row.fromUsername
      this.privateMessageForm.messageId = row.id
    },
    submitPrivateMessage() {
      replyMessage(this.privateMessageForm).then(res => {
        if ( res.code === 200 ) {
          this.$message.success('留言回复成功')
          this.showInnerMessageBoard = false;
          this.getNowUserMessage()
        }else {
          this.$message.error('留言回复失败，请联系管理员')
        }
      })
    },
    // 标记一条留言为已读
    markAsHasRead(row) {
      markMessageRead(row.id).then(res => {
        if ( res.code === 200 ) {
          this.$message.success('标记成功')
          this.getNowUserMessage();
        }else {
          this.$message.error('标记失败')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@keyframes homePageMoveIn {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.container {
  width: 100%;
  height: 100%;
  overflow-y: hidden;

  .menu {
    height: 100%;

    .el-menu-item {
      background-color: #1f2d3d !important;
    }

    .el-menu-item:hover {
      background-color: #001528 !important;
    }

    .icon-menu {
      background-color: #304156 !important;

      .menu-logo {
        width: 30px;
        height: 30px;
      }

      .menu-title {
        margin-left: 5%;
        display: inline-block;
        color: #fff;
        font-weight: 600;
        line-height: 50px;
        font-size: 14px;
        font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
        vertical-align: middle;
      }
    }

    .icon-menu:hover {
      background-color: #304156 !important;
    }
  }

  .header {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;

    .navbar {
      height: 100%;
      width: 100%;
      overflow: hidden;
      position: relative;
      background: #fff;
      box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
      display: flex;
      align-items: center;

      .header-icon {
        font-size: 25px;
        margin-left: 20px;
        cursor: pointer;
      }

      .path {
        font-size: 14px;
        line-height: 50px;
        margin-left: 20px;
      }

      .user-info {
        margin-left: auto;
        margin-right: 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
        .badge {
          margin-right: 20px;
        }
      }
    }
  }

  .main-area {
    padding: 0;
    width: 100%;
    height: 100%;

    .main-tabs {
      width: 99.8%;
      height: 99.8%;
      overflow-y: hidden;

      ::v-deep .el-tabs__content {
        height: 100%;
        padding: 0;

        .el-tab-pane {
          height: 100%;
        }
      }


      .home-page {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        .all-work {
          margin-top: 10px;
          animation: homePageMoveIn .5s cubic-bezier(.4, 0, .2, 1) forwards;
        }

        .advantages {
          margin-top: 25px;
          width: 100%;
          flex: 1;

          .first {
            animation: homePageMoveIn 1s cubic-bezier(.4, 0, .2, 1) forwards;
          }

          .introductions {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-around;

            .second {
              animation: homePageMoveIn 1.5s cubic-bezier(.4, 0, .2, 1) forwards;
            }

            .three {
              animation: homePageMoveIn 2s cubic-bezier(.4, 0, .2, 1) forwards;
            }

            .four {
              animation: homePageMoveIn 2.5s cubic-bezier(.4, 0, .2, 1) forwards;
            }

            .introduction {
              position: relative;
              height: 90%;
              width: 25%;
              .introduce-background {
                width: 100%;
                height: 100%;
                position: absolute;
              }

              .introduction-content {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                z-index: 99;
                .blank {
                  width: 100%;
                  height: 5%
                }
                .introduction-content-background {
                  width: 20%;
                  height: 20%;
                }

                .introduction-title {
                  font-size: 24px;
                  color: #ffffff;
                  font-weight: bold;
                }

                .introduction-text {
                  height: 30%;
                  width: 65%;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  color: #ffffff;
                  font-size: 19px;
                }
              }
            }
          }
        }

        .bottom-blank {
          height: 4%;
        }

        .home-tips {
          display: flex;
          align-items: center;
          .home-tips-icon {
            width: 20px;
            height: 20px;
          }
          .home-tips-text {
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>